Implement Semantic Headings for Page Listing Detail

Now that we have an idea of the heading structure issues on the Listing Detail page, we can go about fixing them.

Heading Structure in a Component-Based Web Application

Because CampSpots is built in React, each page is a component that can either include all of its own markup or incorporate other components.

Looking at the source code for the Listing detail page template at components/page-listing-detail.js there is markup that will dynamically render the name and location of the site from JSON data, along with the description and amenities. The Date Picker component is brought in from another file.

Note that the MegaNav component is not included here. Inside of the entry point for our application, App.js includes a Header component that is rendered above the page component that matches the URL path thanks to some help from Reach Router.

The important thing to take away here is that different components can have their own heading levels that are independent from those in other components. When various components come together on a rendered page, we need to pay attention to the overall outline.

Recall the heading structure that the Web Developer Toolbar showed us:

All of the H2s are included in the MegaNav component, which is in turn brought into the page by the Header component in App.js.

The H4 (”August 2022”) is part of the date picker, which is brought in by the Listing Detail page template.

We need to update the Listing Detail to include additional heading levels to improve the semantic structure of the page.

🛠 Challenge: Add Heading Structure to Page Listing Detail

Your challenge is to build a heading structure for Listing Detail page template in page-listing-detail.js that represents the visual content hierarchy of the page.

Add headings to the page structure in such a way that Web Developer Toolbar’s document outline matches this content hierarchy:

• The MegaNav’s headings remain at the top
• The page’s location and content headings should all be nested below the CampSpot’s name.
• Each content section should follow a relevant heading.

A Note About the Missing H1

At the top of every page’s structure should be a single H1.

We’ve seen that our site is missing an H1, and we know that it needs to be above the H2s in the MegaNav.

This means that even though Cranberry Lake visually looks like a page title, it can’t be the page’s H1.

To get things started, we’ll update the listing’s name to be an h2 instead of a div:

<!-- page-listing-detail --> 
<header
  className="page-header"
  style={{backgroundImage: `url(${headerImageUrl}`}}
>
  <div className="page-header-content wide-layout">
    <h2 className="listing-name">{data.listingName}</h2>
    <p className="location">{data.location}</p>
  </div>
</header>

<!-- page-listing-detail --> 
<header
  className="page-header"
  style={{backgroundImage: `url(${headerImageUrl}`}}
>
  <div className="page-header-content wide-layout">
    <h2 className="listing-name">{data.listingName}</h2>
    <p className="location">{data.location}</p>
  </div>
</header>

We will address the missing H1 later on.

🛠 Solution: Adding Headings to Page Listing Detail

Adding Headings to Build a Page Structure

The camp site description is currently marked up as a div.

Since the description comes immediately after the h2 for the site title, we can mark it up as an h3.

The text “Amenities” introducing the section doesn’t currently have any tag surrounding it, even though visually it looks as important as the description. We can make it an h3 .

The “Calendar” heading also should be turned into an h3.

We can use the same classNames for each heading to apply styling. In our stylesheet, utility classes allow us to style a heading according to a design while choosing the correct heading level.

Here’s what the markup looks like now:

<!-- page-listing-detail --> 
<div className="wide-layout two-parts-70-30">
  <div>
    <h3 className="h4-style">Description</h3>
    <div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

    <h3 className="h4-style">Amenities</h3>
    <ul className="amenity-icons grid">
    {data.amenities.map((amenity, index) => {
        return <li key={index}>
            <Icon name={amenity} showText={true} />
        </li>
    })}
    </ul>
  </div>
  <div>
    <h3 className="h4-style">Calendar</h3>
    <DatePicker />
  </div>
</div>

<!-- page-listing-detail --> 
<div className="wide-layout two-parts-70-30">
  <div>
    <h3 className="h4-style">Description</h3>
    <div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

    <h3 className="h4-style">Amenities</h3>
    <ul className="amenity-icons grid">
    {data.amenities.map((amenity, index) => {
        return <li key={index}>
            <Icon name={amenity} showText={true} />
        </li>
    })}
    </ul>
  </div>
  <div>
    <h3 className="h4-style">Calendar</h3>
    <DatePicker />
  </div>
</div>

Checking our work in the browser, we can see that the headings have a bold style and a little margin under them. Making “Amenities” into a heading also improved the visual look of the page.

Analyze New Page Listing Detail Heading Structure

So now, if we run the Web Developer Toolbar extension again, we will see very different results.

So far we have Cranberry Lake as an h2with h3 headings for the other sections nested below it. The month and year for the date picker is also correctly nested below the Calendar heading.

Menu Structure is Subjective

The MegaNav takes up quite a bit of our page structure, which is a subjective choice.

I chose to mark up the top-level navigation menu items as headings because they contribute major areas to the page structure. These items have buttons nested inside for interactivity, contributing both semantic structure and keyboard/screen reader operability for the MegaNav.

No matter which approach you take in your own projects, make a healthy heading structure a priority for pages, and remember to test with a screen reader!